<template>
    <div>
        <nav class="mui-bar mui-bar-tab">
			<router-link  class="mui-tab-item " to="/home" :class="{'mui-active' : '/home' === $route.path}">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">外卖</span>
			</router-link>
			<router-link  class="mui-tab-item" to="/search" :class="{'mui-active' : '/search' === $route.path}">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
			<router-link   class="mui-tab-item" to="order" :class="{'mui-active' : '/order' === $route.path}">
				<span class="mui-icon mui-icon-bars"></span>
				<span class="mui-tab-label">订单</span>
			</router-link>
			<router-link  class="mui-tab-item" to="profile" :class="{'mui-active' : '/profile' === $route.path}">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</router-link>
		</nav>
    </div>
</template>
<script>
export default {
  data() {
    return {
      aa: "a"
    };
  }
};
</script>
<style lang="scss" scoped>
// 顶部大框
.mui-bar-tab {
  // 小框框
  .mui-tab-item {
    // 文字设置
    .mui-tab-label {
      line-height: 1.6em;
    }
    //我的
  }
}
//更改选中图标的颜色
.mui-bar-tab .mui-tab-item.mui-active {
  color: rgb(16, 138, 111);
}
</style>

